extends ../_layout

block active
  - sidebar_active = 'ecommerce-product-view.html'

block content
  .content-heading Product #000123
  
  form.panel
    div(role='tabpanel')
      ul.nav.nav-tabs.nav-justified
        li.active(role='presentation')
          a(href='#edit', aria-controls='edit', role='tab', data-toggle='tab') Product Edit
        li(role='presentation')
          a(href='#seo', aria-controls='seo', role='tab', data-toggle='tab') SEO Metadata
        li(role='presentation')
          a(href='#picture', aria-controls='picture', role='tab', data-toggle='tab') Pictures
      .tab-content
        #edit.tab-pane.active(role='tabpanel')
          fieldset: .form-group
            label.col-md-2.control-label Name: 
            .col-md-10
              input.form-control(type='text', placeholder='Product name..')
          fieldset: .form-group
            label.col-md-2.control-label Description: 
            .col-md-10
              textarea.form-control(cols="5", placeholder='Short description..')
          fieldset: .form-group
            label.col-md-2.control-label Price: 
            .col-md-10
              input.form-control(type='text', placeholder='$ 123.20')
          fieldset: .form-group
            label.col-md-2.control-label Quantity: 
            .col-md-10
              input.form-control(type='number', placeholder='0', min="0")
          fieldset: .form-group
            label.col-md-2.control-label Tax : 
            .col-md-10
              input.form-control(type='text', placeholder='20%')
          fieldset: .form-group
            label.col-md-2.control-label Status: 
            .col-md-10
              select.form-control
                option(value='') Select..
                option(value='0') Public
                option(value='1') Pending
        #seo.tab-pane(role='tabpanel')
          fieldset: .form-group
            label.col-md-2.control-label Title
            .col-md-10
              input.form-control(type='text', placeholder="Brief description..")
          fieldset: .form-group
            label.col-md-2.control-label Description 
            .col-md-10
              textarea.form-control(rows='5', placeholder='Max 255 characters...')
          fieldset: .form-group 
            label.col-md-2.control-label Keywords
            .col-md-10
              textarea.form-control(rows='5', placeholder='Max 1000 characters...')
        #picture.tab-pane(role='tabpanel')
          .row.mb-lg
            .col-xs-3
              strong Preview
            .col-xs-9
              strong Details
          .row.mb-lg.pb-lg.bb
            .col-xs-6.col-sm-3
              a(href='#', title='Product 1')
                img.img-responsive(src='img/bg7.jpg', alt='Product 1')
            .col-xs-6.col-sm-9
              fieldset: .form-group
                input.form-control(type='text', placeholder="Brief description..")
              p: strong Picture type
              .radio.c-radio.c-radio-nofont
                label
                  input(type='radio', name='prod1-pic', value='option1', checked='')
                  span
                  | Primary
              .radio.c-radio.c-radio-nofont
                label
                  input(type='radio', name='prod1-pic', value='option2')
                  span
                  | Thumbnail
              .radio.c-radio.c-radio-nofont
                label
                  input(type='radio', name='prod1-pic', value='option3')
                  span
                  | Gallery
              .text-right
                button.btn.btn-sm.btn-danger(type="button")
                  em.fa.fa-times-circle.fa-fw
                  | Remove
          .row.mb-lg.pb-lg.bb
            .col-xs-6.col-sm-3
              a(href='#', title='Product 2')
                img.img-responsive(src='img/bg8.jpg', alt='Product 1')
            .col-xs-6.col-sm-9
              fieldset: .form-group
                input.form-control(type='text', placeholder="Brief description..")
              p: strong Picture type
              .radio.c-radio.c-radio-nofont
                label
                  input(type='radio', name='prod2-pic', value='option1', checked='')
                  span
                  | Primary
              .radio.c-radio.c-radio-nofont
                label
                  input(type='radio', name='prod2-pic', value='option2')
                  span
                  | Thumbnail
              .radio.c-radio.c-radio-nofont
                label
                  input(type='radio', name='prod2-pic', value='option3')
                  span
                  | Gallery
              .text-right
                button.btn.btn-sm.btn-danger(type="button")
                  em.fa.fa-times-circle.fa-fw
                  | Remove
          .row.mb-lg.pb-lg
            .col-xs-6.col-sm-3
              a(href='#', title='Product 3')
                img.img-responsive(src='img/bg10.jpg', alt='Product 1')
            .col-xs-6.col-sm-9
              fieldset: .form-group
                input.form-control(type='text', placeholder="Brief description..")
              p: strong Picture type
              .radio.c-radio.c-radio-nofont
                label
                  input(type='radio', name='prod3-pic', value='option1', checked='')
                  span
                  | Primary
              .radio.c-radio.c-radio-nofont
                label
                  input(type='radio', name='prod3-pic', value='option2')
                  span
                  | Thumbnail
              .radio.c-radio.c-radio-nofont
                label
                  input(type='radio', name='prod3-pic', value='option3')
                  span
                  | Gallery
              .text-right
                button.btn.btn-sm.btn-danger(type="button")
                  em.fa.fa-times-circle.fa-fw
                  | Remove

  .text-right.mt-lg
    button.btn.btn-warning(type="button") Discard
    button.btn.btn-success(type="button") Save